<template>
    <div class="content-main">
        <div class="breadcrumb">
            <div class="breadcrumb-icon">
                <img src="./../../assets/images/breadcrumb_icon.png" />
            </div>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/teacher/index' }">实训案例</el-breadcrumb-item>
                <el-breadcrumb-item>笔记详情</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="content-box">
            <div class="content-title">
                {{ chapterVO.name }}
            </div>
            <div class="note-list">
                <ul>
                    <li v-for="(item, index) in stepList">
                        <div class="list-left">{{ index+1 }}</div>
                        <div class="list-content">
                            <div class="list-title">{{ item.name }}</div>
                            <div class="list-text">
                                <vue-editor v-if="item.instructions != ''" disabled v-model="item.instructions"></vue-editor>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    import { VueEditor } from 'vue2-editor'
    export default {
        components: {
            VueEditor
        },
        data () {
            return {
                userId: '',
                chapterId: '',
                stepList: [],
                chapterVO: ''
            }
        },
        created () {
            this.userId = this.$route.query.userId
            this.chapterId = this.$route.query.chapterId
            this.init()
        },
        methods: {
            init() {
                let self = this
                self.$http.get('/dataplatform/chapter/getStudentNotes?userId='+self.userId+'&chapterId='+self.chapterId).then(response =>{
                    let res = response.data
                    if(res.code == '200'){
                        self.stepList = res.data.stepList
                        self.chapterVO = res.data.chapterVO
                        this.$nextTick(function () {
                            $('.ql-toolbar').hide()
                            $('.ql-editor').css('min-height','auto')
                            $('.ql-container').css('border','none')
                        })
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            }
        }
    }
</script>
